import React, { useEffect, useRef } from 'react'
import { Card, Button } from 'antd'
import ReactEcharts from 'echarts-for-react';
import themeLight from '../themeLight'
import echarts from 'echarts'

let codeArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
let resultCode = ''

const Bar = () => {
  const echartReact = useRef(null)

  useEffect(() => {
    echarts.registerTheme('Peach', themeLight)
  }, [])

  const getOption = () => {
    let option = {
      title: {
        text: '用户骑行订单',
        x: 'center'
      },
      legend: {
        orient: 'vertical',
        right: 10,
        top: 20,
        bottom: 20,
        data: [
          '周一',
          '周二',
          '周三',
          '周四',
          '周五',
          '周六',
          '周日'
        ]
      },
      tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      series: [
        {
          name: '订单量',
          type: 'pie',
          radius: '55%',
          center: [
            '50%', '50%'
          ],
          data: [
            {
              value: 1000,
              name: '周一'
            }, {
              value: 1000,
              name: '周二'
            }, {
              value: 2000,
              name: '周三'
            }, {
              value: 1500,
              name: '周四'
            }, {
              value: 3000,
              name: '周五'
            }, {
              value: 2000,
              name: '周六'
            }, {
              value: 1200,
              name: '周日'
            }
          ].sort(function (a, b) { return a.value - b.value; }),
          roseType: 'radius',
          animationType: 'scale',
          animationEasing: 'elasticOut',
          animationDelay: function (idx) {
            return Math.random() * 200;
          }
        }
      ]
    }
    return option;
  }

  const saveImage = () => {
    let echarts_instance = echartReact.current.getEchartsInstance().getDataURL()
    let img = new Image()
    img.src = echarts_instance
    let a = document.createElement('a')
    let event = new MouseEvent('click')
    a.download = getCode(codeArray)
    a.href = img.src
    a.dispatchEvent(event)
  }

  const getRandom =(min, max) => {
    return Math.floor(Math.random() * (max - min)) + min
  }

  const getCode = (codeArray) => {
    for (let i = 0; i <= 6; i++) {
      let code = codeArray[getRandom(0, codeArray.length)]
      resultCode += code
    }
    return resultCode
  }

  return (
    <div style={{ width: '1200px' }}>
      <Card style={{ marginTop: 10 }}>
        <Button type='dashed' onClick={saveImage}>保存图片</Button>
        <ReactEcharts
          option={getOption()}
          theme="Peach"
          notMerge={true}
          ref={echartReact}
          lazyUpdate={true}
          style={{ height: 500 }} />
      </Card>
    </div>
  );
}

export default Bar